<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<html>
<body>
<div class="aside-body" ng-show="content">
    <div class="panel-body" style="padding-top:0">
        <select id="crtSizeSelect" class="form-control w">
        </select>
        <input id="crtSizeInput" type="hidden" value="${form.crtSize }"/>
        <input id="sitesetType" type="hidden" value="${form.sitesetType }"/>
    </div>
    <div class="p-md clear ng-scope" style="max-height:380px; overflow:auto">
        <c:forEach items="${form.page.content }" var="frontMaterial">
            <div class="col-sm-3">
                <div name="creativeSelect" class="panel b-a">
                    <div class="panel-heading bg text-lt ng-scope" ng-controller="AsideDemoCtrl">
                            ${ frontMaterial.name}
                    </div>
                    <div class="progress progress-xxs no-margin no-radius bg-white">
                        <div class="progress-bar bg-light no-radius" style="width:100%"></div>
                    </div>
                    <div class="panel-body p-v-md cl">
                        <img src="${frontMaterial.thumbPicPath }" alt=" ">
                    </div>
                    <div class="panel-heading text-center" style="padding-top:0">
                        <small class="text-muted">${frontMaterial.crtSizeDetail}</small>
                    </div>
                    <input type="hidden" value="${ frontMaterial.id}"/>
                    <input type="hidden" value="${ frontMaterial.name}"/>
                </div>
            </div>
        </c:forEach>
        <input id="pageNumber" type="hidden" value="${form.page.pageNumber }"/>
    </div>
</div>
<!-- 分页 -->
<div class="text-center">
    <airad:pagination pageSize="${form.page.pageSize }"
                      href=" javascript:creativesPage(PAGENUM,'${form.crtSize}','${form.sitesetType }')"
                      totalRecord="${form.page.totalCount }"
                      currentPage="${form.page.pageNumber }"
    >
    </airad:pagination>
</div>
<script type="text/javascript" src="/js/imageAuto.js"></script>
<script type="text/javascript">
    $().ready(function () {

        //图片大小适应容器
//     	$('div.panel-body.p-v-md  img').load(function() {  
//              adjustImgSize($(this), $(this).parent().width(), $(this).parent().height());  
//          });  

        //初始化尺寸下拉框
        $("#crtSizeSelect").html("<option value='0'>全部尺寸</option>");
        for (var i = 0; i < crtSizes.length; i++) {
            if ($("#sitesetType").val() == crtSizes[i].siteSetType) {
                $("#crtSizeSelect").append("<option  value='" + crtSizes[i].crtSize + "' " + selected(crtSizes[i].crtSize, $("#crtSizeInput").val()) + ">" + crtSizes[i].string + "</option>")
            }
        }
        //
        function selected(crtSize, crtSize2) {
            if (crtSize == crtSize2) {
                return "selected='selected'"
            }
            return "";
        }

        //初始化被选中的创意
        selectedCreatives();

        $("#crtSizeSelect").change(function () {
            creativesPage($("#pageNumber").val(), $(this).val(), $("#sitesetType").val());
            //初始化被选中的创意
            selectedCreatives();
        });
        //创意高亮
        $("div[name=creativeSelect]").hover(
                function () {
                    $(this).addClass("b-info");
                },
                function () {
                    $(this).removeClass("b-info");
                }
        );
        //选择创意
        $("div[name=creativeSelect]").click(function () {
            var cid;
            var cname;
            if ($(this).hasClass("b-success")) {
                $(this).removeClass("b-success");
                $(this).addClass("b-a");
                //获得该标签下隐藏的创意id
                $(this).find("input").each(function (i, e) {
                    if (i == 0) {
                        cid = $(this).val();
                    }
                })

                $("#creativesInputs").find("input[name='creativesId']").each(function () {
                    if (cid == $(this).val()) {
                        // 移除input的标签
                        $("#id-" + cid).remove();//id
                        $("#name-" + cid).remove();//创意名称
                    }

                });

            } else {
                if ($("input[name='creativesId']").length >= 10) {
                    alert("一个广告下最多只能选择10条创意")
                    return
                }
                $(this).removeClass("b-a");
                $(this).addClass("b-success");
                //获得该标签下隐藏的创意id
                $(this).find("input").each(function (i, e) {
                    if (i == 0) {
                        cid = $(this).val();
                    }
                    if (i == 1) {
                        cname = $(this).val();
                    }

                })
                var input = "<input id='id-" + cid + "' name='creativesId'  type='hidden' value='" + cid + "'/>";
                var creativeName = "<input id='name-" + cid + "' type='hidden' value='" + cname + "'/>"
                //添加创意
                $("#creativesInputs").append(input);
                $("#creativesInputs").append(creativeName);

            }

        });
    });

</script>
</body>
</html>